<template>
  <div class="details" v-loading="loading">
    <div class="headline">推广信息</div>

    <div class="matter">
      <div class="top">
        <div class="list" v-for="(item, index) in 5" :key="index">
          <div class="key">
            {{
              index == 0
                ? "推广平台"
                : index == 1
                ? "推广人"
                : index == 2
                ? "推广店铺ID"
                : index == 3
                ? "审核状态"
                : index == 4
                ? "提交时间"
                : ""
            }}:
          </div>
          <div class="value">
            {{
              index == 0
                ? detailsObj.promotionName
                : index == 1
                ? detailsObj.nickname
                : index == 2
                ? detailsObj.shopId
                : index == 3
                ? detailsObj.promotionAuditStatus == 0
                  ? "未审核"
                  : detailsObj.promotionAuditStatus == 1
                  ? "已通过"
                  : detailsObj.promotionAuditStatus == 2
                  ? "已否决"
                  : ""
                : index == 4
                ? detailsObj.createTime
                : ""
            }}
          </div>
        </div>
      </div>

      <div class="center">
        <div class="list">
          <div class="key">推广材料:</div>
          <div class="value" v-if="bannerList.length > 0">
            <div class="imgs" v-for="(item, index) in bannerList" :key="index">
              <img :src="item" alt="" />
            </div>
          </div>

          <div class="value" v-else>
            <div class="imgs">暂无材料</div>
          </div>
        </div>
      </div>

      <div class="center">
        <div class="list">
          <div class="key">备注:</div>
          <div class="value">
            {{ detailsObj.promotionAuditBreak }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { promotionListId } from "@/api/promotion";

export default {
  data() {
    return {
      id: "",
      detailsObj: {},
      bannerList: [],
      //-------------
      loading: false
    };
  },
  created() {
    this.loading = true
    this.id = this.$route.query.id;
    this.promotionListIdMet();
  },
  methods: {
    //--------
    promotionListIdMet() {
      let params = this.id;

      promotionListId(params).then((res) => {
        if (res.errorCode == null) {
          if (res.resultData.promotionAuditImage != null) {
            this.bannerList = res.resultData.promotionAuditImage.split(";");
          } else {
            this.bannerList = [];
          }

          this.detailsObj = res.resultData;

          this.loading = false
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.details {
  .headline {
    height: 40px;
    padding: 0 20px;
    box-sizing: border-box;
    background: #eef5fd;
    border-radius: 5px;
    display: flex;
    align-items: center;
  }

  .matter {
    margin-top: 20px;
    .top,
    .center,
    .bottom {
      display: flex;
      flex-wrap: wrap;

      .list {
        width: calc((100% / 4));
        margin-bottom: 10px;
        display: flex;
        align-items: center;

        .value {
          margin-left: 10px;
        }
      }
    }

    .center {
      .list {
        width: 100%;
        align-items: normal;

        .value {
          display: flex;
          flex-wrap: wrap;

          .imgs {
            width: 100px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-right: 10px;
            color: #cccccc;

            img {
              width: 100%;
              height: 100%;
              border-radius: 5px;
            }
          }
        }
      }
    }
  }
}
</style>